<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 09:25
 * Desc: filmInvalidCoupon 电影无效券
 */
-->

<template>
  <view class="filmInvalid-coupon">
    <view class="filmInvalid-coupon__tabs">
      <u-tabs
        v-model="activeTab"
        :list="arr"
        :scrollable="false"
        @change="change"
        label-key="name"
        val-key="couponType"
        :active-style="{
          color: '#3BC5D2',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }"
        line-color="#3BC5D2"
      ></u-tabs>
    </view>
    <view class="filmInvalid-coupon__coupon-box">
      <yy-list :list="listData" :loading="listLoading" :finished="listFinished" empty-type="history">
        <coupon-box v-for="item in listData" :key="item.cId">
          <view slot="left" class="filmInvalid-coupon__coupon-main" @click="toDetail(item.couponId, getStatus(item))">
            <view class="filmInvalid-coupon__coupon-money">{{ item.couponName || '--' }}</view>
            <view class="">{{ item.sD || '--' }}~{{ item.eD || '--' }}</view>
          </view>
          <view slot="right" class="filmInvalid-coupon__coupon-status" :class="'filmInvalid-coupon__coupon-status--' + getStatus(item)"> </view>
        </coupon-box>
      </yy-list>
    </view>
    <!-- <check-film-coupon url="/pagesOrder/filmCoupon/index"></check-film-coupon> -->
  </view>
</template>
<script>
  import CouponBox from '@/pagesOrder/components/CouponBox/index.vue'
  // import CheckFilmCoupon from '@/components/CheckFilmCoupon/index.vue'
  import listMixins from '@/mixins/listMixins'
  import { deDupArray } from '@/utils'
  export default {
    name: 'film-invalid-coupon',
    components: { CouponBox },
    mixins: [listMixins],
    data() {
      return {
        arr: [
          { name: '兑换券', couponType: '1' },
          { name: '优惠券', couponType: '2' }
        ],
        activeTab: '1'
      }
    },
    onShow() {
      this.listLoad()
    },
    methods: {
      onloadList() {
        const query = {
          ...this.search,
          ...this.pageInfo,
          ...{ couponType: this.activeTab, invalid: '2' }
        }
        return uni.$api.coupon.getCouponList(query).then((res) => {
          if (this.isLoading) {
            // 是下啦刷新 清空
            this.listData = []
          }
          const listData = [...this.listData, ...res.list]
          this.listData = deDupArray(listData, 'cId')
          console.log(this.listData, 'listData')
          return res
        })
      },
      toDetail(id, status) {
        // #ifndef MP-TOUTIAO
        const query = { couponId: id, status, isFromSureOrder: 'history' }
        this.$tools.navigateTo('/subPages/rightsCodeDetail/index', query)
        // #endif
      },
      change(val) {
        this.activeTab = val.couponType
        this.listRefresh()
      },
      onPullDownRefresh() {
        this.listRefresh()
      },
      onReachBottom() {
        this.listLoad()
      },
      getStatus(item) {
        if (item.isFrozen === '1') {
          return 'freeze'
        } else if (item.isOver === '1') {
          return 'overdue'
        } else if (item.isUse === '1') {
          return 'used'
        } else if (item.isVoid === '1') {
          return 'invalid'
        }
      }
    },
    computed: {
      listDataLength() {
        return this.listData.length > 0
      }
    }
  }
</script>
<style lang="scss" scoped>
  .filmInvalid-coupon {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 100%;
    background: #f3f5f7;
    color: #919191;
    &__tabs {
      // #ifdef MP-ALIPAY
      display: flex;
      justify-content: center;
      align-items: center;
      // #endif
      width: 100vw;
      height: 80rpx;
      background: #ffffff;
    }
    &__coupon-box {
      width: 100%;
      padding: 20rpx 20rpx;
    }
    &__coupon-main {
      // padding: 0.35rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 29rpx;
      font-size: 24rpx;
      color: #919191;
    }
    &__coupon-money {
      margin: 0 0 20rpx 0;
      // margin-bottom: 35rpx 0 25rpx 0;
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
    }
    &__coupon-status {
      width: 96rpx;
      height: 96rpx;
      // transform: scale(0.5);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &__coupon-status--used {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-used.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--invalid {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-invalid.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--overdue {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-overdue.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--verification {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-verification.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--freeze {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-freeze.png) no-repeat;
      background-size: 100%;
    }
    .white {
      background: #fff;
    }
  }
</style>
